<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相册应用</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="header">
        <button class="back-btn-nav" onclick="window.location.href='/'">
            <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
                <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
            </svg>
        </button>
        <h1>相册</h1>
        <button class="upload-btn" id="uploadBtn">上传</button>
        <input type="file" id="fileInput" accept="*" multiple>
    </div>
    
    <!-- 上传进度条 -->
    <div id="uploadProgressContainer" style="display: none; margin: 10px 0;">
        <div id="uploadProgress" style="height: 10px; background-color: #f0f0f0; border-radius: 5px; overflow: hidden;">
            <div id="uploadProgressBar" style="height: 100%; background-color: #07c160; width: 0%; transition: width 0.3s;"></div>
        </div>
        <div id="uploadProgressText" style="text-align: center; font-size: 14px; margin-top: 5px;">0%</div>
    </div>
    
    <div class="gallery-container" id="galleryContainer">
        <!-- 媒体文件将在这里动态加载 -->
    </div>

    <!-- 底部返回按钮已移除 -->
    <script src="js/main.js"></script>
</body>
</html>